<template>
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item :name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">能耗统计</text></view>
					</template>
					<my-grid :list="list3" col="2" decimals="2" imgWidth='40%' />
				</u-collapse-item>

				<u-collapse-item :name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">设备能耗排名-水能（立方米）</text></view>
					</template>
					<my-scroll style="height:300px">
						<view v-for="(item,i) in list" :key="i" class="flex s-center item">
							<view class="index m-r-10 flex-center">
								{{i+1}}
							</view>
							<view class="f1 w0">
								<view class="flex m-between m-b-5">
									<up-text :text="item.name" size="12" />
									<view>
										<up-text type="primary" :text="item.value" size="14" />
									</view>
								</view>
								<up-line-progress :percentage="((item.value/list[0].value)*100).toFixed(2)" height="8"
									:showText="false" :activeColor="i==0 ? '#5ecc49' : i==1 ? '#efe147' : '#0de1b2'" />
							</view>
						</view>
					</my-scroll>
				</u-collapse-item>

				<u-collapse-item :name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">设备能耗排名-电能（千瓦时）</text></view>
					</template>
					<my-scroll style="height:300px">
						<view v-for="(item,i) in list2" :key="i" class="flex s-center item">
							<view class="index m-r-10 flex-center">
								{{i+1}}
							</view>
							<view class="f1 w0">
								<view class="flex m-between m-b-5">
									<up-text :text="item.name" size="12" />
									<view>
										<up-text type="primary" :text="item.value" size="14" />
									</view>
								</view>
								<up-line-progress :percentage="((item.value/list2[0].value)*100).toFixed(2)" height="8"
									:showText="false" :activeColor="i==0 ? '#5ecc49' : i==1 ? '#efe147' : '#0de1b2'" />
							</view>
						</view>
					</my-scroll>
				</u-collapse-item>

				<u-collapse-item :name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">计划/实际能耗统计-水能</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="mix" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item :name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">计划/实际能耗统计-电能</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="mix" ontouch :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	/**************************************页面逻辑*************************************************/
	import {
		getApiFabric,
	} from "@/api/customApi";

	const showMoreKeys = ref([1, 2, 3, 4]),
		collapse = ref(null)

	/**************************************设备能耗排名-水能（立方米）*************************************************/
	const list = ref([]);

	function fn() {
		getApiFabric({
			apiCode: "1b35df29-8c48-4802-aad9-cd1e250b4afc",
			propertyMapping: {
				name: "name",
				value: "value",
				t: "value"
			}
		}).then(res => {
			list.value = res.data;
			nextTick(() => {
				collapse.value.init()
			})
		})
	}
	/**************************************设备能耗排名-电能（千瓦时）*************************************************/
	const list2 = ref([]);

	function fn2() {
		getApiFabric({
			apiCode: "c9bba86f-b8b0-4ca8-ac57-3719aae4d66a",
			propertyMapping: {
				name: "name",
				value: "value",
				t: "value"
			}
		}).then(res => {
			list2.value = res.data
			nextTick(() => {
				collapse.value.init()
			})
		})
	}
	/**************************************设备能耗排名-电能（千瓦时）*************************************************/
	const list3 = ref([{
		img: 'd1.png',
		key: '计划用电',
		title: '计划用电',
		value: 0,
		unit: 'kW/h'
	}, {
		img: 's1.png',
		key: '计划用水',
		title: '计划用水',
		value: 0,
		unit: 'm³'
	}, {
		img: 'd2.png',
		key: '实际用电',
		title: '实际用电',
		value: 0,
		unit: 'kW/h'
	}, {
		img: 's2.png',
		key: '实际用水',
		title: '实际用水	',
		value: 0,
		unit: 'm³'
	}, {
		img: 'd3.png',
		key: '剩余用电',
		title: '剩余用电',
		value: 0,
		unit: 'kW/h'
	}, {
		img: 's3.png',
		key: '剩余用水',
		title: '剩余用水',
		value: 0,
		unit: 'm³'
	}]);

	function fn3() {
		getApiFabric({
			apiCode: "9f8c8ec2-66cb-49b2-893a-cbee031e6462",
			propertyMapping: {
				key: "name",
				val: "value"
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list3.value.forEach(item => {
				item.value = data[item.key]
			})
			nextTick(() => {
				collapse.value.init()
			})
		})
	}
	/**************************************计划/实际能耗统计-水能*************************************************/
	const opts = {
			color: ["#1179E8", "#52D29D"],
			padding: [0, 10, 10, 0],
			enableScroll: true,
			dataLabel: false,
			legend: {
				position: 'top',
				margin: 10
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				itemCount: 3,
			},
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: 'm³',
					titleOffsetY: -10,
				}]
			},
			extra: {
				mix: {
					column: {
						width: 10
					},
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			}
		},
		chartData = ref({})

	function fn4() {
		getApiFabric({
			apiCode: "8368381f-0853-488b-9d21-c962d9d93cb8",
			propertyMapping: {
				x: "x",
				y1: "y",
				z1: "z"
			}
		}).then(res => {
			const resData = res.data.reverse().reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1)
				prev.series2.push(cur.z1)
				return prev;
			}, {
				categories: [],
				series1: [],
				series2: []
			})
			chartData.value = {
				categories: resData.categories,
				series: [{
					name: "实际用水",
					type: "column",
					data: resData.series1
				}, {
					name: "计划用水",
					type: "line",
					data: resData.series2
				}]
			}
		})
	}
	/**************************************计划/实际能耗统计-电能*************************************************/
	const opts2 = {
			...opts,
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: 'kW/h',
					titleOffsetY: -10,
				}]
			},
		},
		chartData2 = ref({})

	function fn5() {
		getApiFabric({
			apiCode: "940f48bf-bfd7-469e-9c53-0854800e8cc2",
			propertyMapping: {
				x: "x",
				y1: "y",
				z1: "z"
			},
		}).then(res => {
			const resData = res.data.reverse().reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1)
				prev.series2.push(cur.z1)
				return prev;
			}, {
				categories: [],
				series1: [],
				series2: []
			})
			chartData2.value = {
				categories: resData.categories,
				series: [{
					name: "实际用电",
					type: "column",
					data: resData.series1
				}, {
					name: "计划用电",
					type: "line",
					data: resData.series2
				}]
			}
		})
	}

	function getServerData(refresh) {
		Promise.all([fn(), fn2(), fn3(), fn4(), fn5()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style lang="scss" scoped>
	.item {
		padding: 10px;
		background-color: aliceblue;
		border-radius: 4px;

		.index {
			border-radius: 50%;
			width: 20px;
			height: 20px;
			background-color: #d5d5d6;
			font-size: 12px;
		}

		&.item {
			margin-top: 5px;
		}
	}
</style>